<template>
  <BasicLayout>
    <template #wrapper>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <div>
              <div class="text-center">
                <userAvatar :user="user" style="text-align: center; margin: auto;" />
              </div>
              <ul class="list-group list-group-striped">
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="user" /> -->
                  账号名称
                  <div class="pull-right">{{ user.userName }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="user" /> -->
                  用户昵称
                  <div class="pull-right">{{ user.nickName }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="user" /> -->
                  用户真实姓名
                  <div class="pull-right">{{ user.realName }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="user" /> -->
                  身份证号
                  <div class="pull-right">{{ user.identityNumber }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="phone" /> -->
                  手机号码
                  <div class="pull-right">{{ user.phone }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="date" /> -->
                  创建日期
                  <div class="pull-right">{{ user.createDate }}</div>
                </li>
                <li class="list-group-item">
                  <!-- <svg-icon icon-class="tree" /> -->
                  关联角色
                  <div class="pull-right">{{ roleList() }}</div>
                </li>
                <li class="list-group-bottomitem">
                  <!-- <svg-icon icon-class="peoples" /> -->
                  绑定场馆
                  <div class="pre">{{ vunueList() }}</div>
                </li>

              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基本资料" name="userinfo" @loadData="getUser">
                <userInfo :user="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPwd">
                <resetPwd :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </template>
  </BasicLayout>
</template>

<script>
import userAvatar from './userAvatar'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import { merchantInfo } from '@/api'

export default {
  name: 'Profile',
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      deptGroup: {},
      activeTab: 'userinfo',
      roleIds: undefined,
      postIds: undefined,
      roleName: undefined,
      postName: undefined,
      dept: {},
      deptName: undefined
    }
  },
  created() {
    this.getUser()
    if (this.$route.query.activename) {
      this.activeTab = this.$route.query.activename
    }
  },
  methods: {
    getUser() {
      merchantInfo({
        param: {
          id: sessionStorage.getItem('userId')
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.user = res.record
          this.$store.dispatch('app/touUser', res.record)
        })
        .catch(() => {
        })
    },
    roleList() {
      const roles = []
      for (const roleinfo of this.user.roleList) {
        roles.push(roleinfo.name)
      }
      return roles.join('/')
    },
    vunueList() {
      const stadiumList = []
      for (const stadium of this.user.stadiumList) {
        stadiumList.push(stadium.name)
      }
      return stadiumList.join('\n')
    }
  }
}
</script>

<style lang="scss" scoped>
  .list-group-item{
    padding: 18px 0;
  }
  .svg-icon{
    margin-right: 5px;
  }
    .pre {
  white-space: pre;
  float: right !important;
  }
  .list-group-bottomitem {
  padding: 11px 0px;
  font-size: 13px;
  margin-bottom: 10px;
  overflow:hidden;
}
</style>
